
<template>
  <el-row class="fixgudh">
    <el-col :span=5>
      <el-menu default-active="2" class="el-menu-vertical-demo" unique-opened>
        <span :key="index" v-for="(item,index) in  banner">
          <span v-if="item.child">
            <el-submenu :index="index+''">
              <template slot="title">
                <router-link :to="item.path" class="mra">{{item.name}}</router-link>
              </template>
              <el-menu-item-group>
                <el-menu-item :key="index+'-'+k " v-for="(i,k) in item.child ">
                  <router-link :to="i.path" class="mra">{{i.name}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </span>
          <el-menu-item :index="index+''" v-else>
            <span slot="title">
              <router-link :to="item.path" class="mra">{{item.name}}</router-link>
            </span>
          </el-menu-item>
        </span>
      </el-menu>
    </el-col>
    <el-col :span=19>
      <router-view ></router-view>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      banner: [
        { name: "网站公告", path: "/Aboutme/Announcement" },
        { name: "公司介绍", path: "/Aboutme/Introduction" },
        { name: "服务协议", path: "/Aboutme/Protocol" },
        {
          name: "常见问题",
          path: "/Aboutme/Help",
          child: [
            { name: "理财帮助", path: "/Aboutme/Help" },
            { name: "炒股帮助", path: "/Aboutme/helpStocks" },
            { name: "咨询建议", path: "/Aboutme/helpSuggest" }
          ]
        },
        { name: "媒体报道", path: "/Aboutme/Report" },
        { name: "诚聘英才", path: "/Aboutme/Recruitment" },
        { name: "联系我们", path: "/Aboutme/Contact" }
      ],
      bgc: 0
    };
  },
  methods: {
    AboutMeClick(i) {
      this.bgc = i;
    }
  }
};
</script>

<style scope>
.mra{
  color: #000;
  width: 100%;
  display: inline-block;
}
.fixgudh{
  margin-top: 10px;
  height:calc(100vh - 280px);
}
</style>
